<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="16">
                <PoliceSituation/>
            </el-col>
            <el-col :span="8">
                <DepartmentPoliceSituation/>
                <div class="mb-2"></div>
                <ToDoList/>
                <div class="mb-2"></div>
                <PoliceDynamics/>
                <div class="mb-2"></div>
                <WorkCalendar/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// import Home from '@/views/index.vue'
import ToDoList from "@/components/PoliceAreaChart/ToDoList.vue";
import PoliceDynamics from "@/components/PoliceAreaChart/PoliceDynamics.vue";
import WorkCalendar from "@/components/PoliceAreaChart/WorkCalendar.vue";
import PoliceSituation from "@/components/PoliceAreaChart/PoliceSituation.vue";
import DepartmentPoliceSituation from "@/components/PoliceAreaChart/DepartmentPoliceSituation.vue";
</script>

<style scoped lang="scss">
.app-container {
    padding-bottom: 60px;
}
</style>